<template>
  <div class="edit-bank">
    <div class="title">选择你关心的银行</div>
    <div class="block" v-for="(v, k) in bankList" :key="k">
      <div class="letter">{{k}}</div>
      <div class="flex-box">
        <div class="item" 
          v-for="(b, i) in v" :key="b.id" 
          :class="{active: b.is_active}" 
          @click="bankChoose(k, i, b.is_active)"
        >
          {{b.name}}
        </div>
        <div class="item" v-if="v.length % 3 === 2"></div>
      </div>
    </div>
    <div class="btn-group">
      <mt-button type="default" :plain="true" class="cancel" @click="closeEditBank">返回</mt-button>
      <mt-button type="primary" class="confirm" @click="confirm">保存</mt-button>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'mint-ui'

  export default {
    name: 'EditBank',
    data () {
      return {
        bankList: [],
        bankActive: []
      }
    },
    methods: {
      closeEditBank () {
        this.$emit('closeBankPopup')
      },
      confirm () {
        if (this.bankActive.length <= 0) {
          msg('请选择银行')
          return false
        }
        let params = {show_bank_ids: this.bankActive}
        MessageBox.confirm('将所选银行的4/5星活动批量加入“我的活动”？', '温馨提示').then(act => {
          if (act === 'confirm') {
            this.$post('/vue/setting/add_activity_of_banks')
          }
          this.$post('/vue/setting/update_user_banks', params).then(data => {
            msg('保存成功')
            this.$emit('closeBankPopup')
          })
        }).catch(err => {
          if (err === 'cancel') {
            this.$post('/vue/setting/update_user_banks', params).then(data => {
              msg('保存成功')
              this.$emit('closeBankPopup')
            })
          }
        })
      },
      getBankList () {
        this.$post('/vue/bank/get_pinyin_list', {}).then(data => {
          this.bankList = data
          for (const k in data) {
            if (data.hasOwnProperty(k)) {
              for (let i = 0; i < data[k].length; i++) {
                if (data[k][i].is_active === true) {
                  this.bankActive.push(data[k][i].id)
                }
              }
            }
          }
        })
      },
      bankChoose (k, i, active) {
        this.bankList[k][i].is_active = !active
        let index = this.inArray(this.bankActive, this.bankList[k][i].id)
        if (index !== false) {
          this.bankActive.splice(index, 1)
        } else {
          this.bankActive.push(this.bankList[k][i].id)
        }
      },
      inArray (arr, val) {
        for (let i = 0; i < arr.length; i++) {
          if (val === arr[i]) {
            return i
          }
        }
        return false
      }
    },
    mounted () {
      this.getBankList()
    }
  }
  const msg = (m) => {
    Toast({
      message: m,
      position: 'bottom',
      className: 'edit-bank-toast',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);
  @c-dark-blue: rgb(240, 244, 247);

  .mint-toast.edit-bank-toast {
    z-index: 3000;
  }
  .edit-bank {
    width: 82vw;
    height: calc(~'100vh - 56px');
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    .title {
      padding: 12px;
      font-size: 15px;
      font-weight: bold;
      line-height: 24px;
      color: @c-124;
    }
    .block {
      .letter {
        height: 24px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 24px;
        background-color: rgb(240, 244, 247);
        &.hide {
          display: none;
        }
      }
      .flex-box {
        padding: 12px 12px 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: space-between;
        &.pd-0 {
          padding: 0;
        }
        .item {
          width: 88px;
          margin-bottom: 12px;
          text-align: center;
          font-size: 13px;
          line-height: 24px;
          color: @c-124;
          flex: 0 0 auto;
          background-color: rgb(242, 247, 250);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
          // &.other {
          //   position: absolute;
          //   right: 12px;
          //   top: 12px;
          // }
          &.active {
            color: rgb(40, 100, 150);
            background-color: rgba(108, 184, 222, 0.3);
            box-shadow: none;
          }
        }
      }
    }
    .btn-group {
      width: 92%;
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 7px 12px;
      background-color: #FFF;
      border-top: 1px solid rgb(226, 226, 226);
      display: flex;
      justify-content: space-between;
      .cancel {
        flex: 1;
        font-size: 13px;
        font-weight: bold;
        border-radius: 8px;
        border-color: rgb(226, 226, 226);
        color: rgb(124, 124, 124);
      }
      .confirm {
        flex: 2;
        font-size: 13px;
        border-radius: 8px;
        margin-left: 12px;
        background-color: rgb(108, 184, 222);
      }
    }
  }
</style>